import React, {Component} from 'react';
import {View,Text, ImageBackground, StyleSheet,Image} from 'react-native';
import { Button } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';

import Header from "../../components/header";
import {pxToDp} from "../../utils/styleKits";

class TestQa extends Component {
  data = [
    {content: '陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。'},
    {content: '蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？'},
    {content: '昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。'},
    // {content: '金满箱，银满箱，转眼乞丐人皆谤。'},
    // {content: '正叹他人命不长，那知自己归来丧！'},
    // {content: '训有方，保不定日后作强梁。择膏粱，谁承望流落在烟花巷！'},
    // {content: '因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。'},
    // {content: '乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！'},
  ];

  state = {
    index: 0,
    choose: [],
  };

  render() {
    let {index} = this.state;
    return (
      <View style={{flex: 1}}>
        <Header title={'初级测试题'}/>

        <ImageBackground source={require('../../images/qabg.png')} style={styles.bg}>
          {/*左右两个标签图片*/}
          <View style={styles.headImgBox}>
            {/*左边图片*/}
            <ImageBackground source={require('../../images/qatext.png')} style={styles.leftRightImg}>
              <Image source={{uri: 'https://www.itying.com/images/flutter/list1.jpg'}} style={styles.headImg}/>
            </ImageBackground>

            <View style={{alignItems: 'center'}}>
              <Text style={{color:'#fff',fontSize:pxToDp(20)}}>第一题</Text>
              <Text style={{color:'#fff',fontSize:pxToDp(12)}}>({index === this.data.length? this.data.length: index+1}/{this.data.length})</Text>
            </View>

            <Image source={require('../../images/leve1.png')} style={styles.leftRightImg}/>
          </View>

          {/*中间内容*/}
          <Text style={styles.content}>{index === this.data.length? this.data[this.data.length-1].content : this.data[index].content}</Text>


          {/*按钮*/}
          <Button
            ViewComponent={LinearGradient} // Don't forget this!
            linearGradientProps={{
              colors: ['rgb(116, 74, 243)', 'rgb(237, 93, 139)'],
              start: { x: 0, y: 0 },
              end: { x: 1, y: 0 },
            }}
            buttonStyle = {{
              width: '80%',
              height: pxToDp(50),
              alignSelf: 'center',
              borderRadius: pxToDp(10),
              marginBottom: pxToDp(20),
            }}
            title = {'跟物质关系更大'}
            onPress={this.chooseContent.bind(this, 'A')}
          />

          <Button
            ViewComponent={LinearGradient} // Don't forget this!
            linearGradientProps={{
              colors: ['rgb(116, 74, 243)', 'rgb(237, 93, 139)'],
              start: { x: 0, y: 0 },
              end: { x: 1, y: 0 },
            }}
            buttonStyle = {{
              width: '80%',
              height: pxToDp(50),
              alignSelf: 'center',
              borderRadius: pxToDp(10)
            }}
            title = {'跟精神关系更大'}
            onPress={this.chooseContent.bind(this, 'B')}
          />
        </ImageBackground>
      </View>
    );
  }

  chooseContent = (arg) => {
    let {index, choose} = this.state;

    if (index === this.data.length) return;
    choose.push(arg);
    this.setState({
      index: index+1,
      choose,
    }, ()=>{
      if( index === this.data.length-1){
        this.props.navigation.push('testResult');
      }
    });
    console.log(choose)
  }
}

const styles = StyleSheet.create({
  bg: {
    width: '100%',
    height: '100%',
  },

  // 最上面左右两标签图片
  headImgBox: {
    marginTop: pxToDp(50),
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  leftRightImg: {
    width: pxToDp(80),
    height: pxToDp(50),
    alignItems: 'flex-end',
  },
  headImg: {
    width: pxToDp(50),
    height: pxToDp(50),
    borderRadius: pxToDp(25),
  },

  content: {
    color: '#fff',
    margin: pxToDp(30),
  }
});

export default TestQa;